/**
 * Ollama Llava3 演示页面
 * 展示多模态AI功能的使用示例
 */

'use client'

import React from 'react'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { 
  Bot, 
  Eye,
  MessageSquare,
  Image as ImageIcon,
  Stethoscope,
  Zap,
  CheckCircle,
  AlertCircle,
  ExternalLink
} from 'lucide-react'
import OllamaLlavaAssistant from '@/components/OllamaLlavaAssistant'

export default function OllamaDemoPage() {
  return (
    <div className="container mx-auto p-6 space-y-8">
      {/* 页面标题 */}
      <div className="text-center space-y-4">
        <div className="flex items-center justify-center space-x-3">
          <div className="relative">
            <Bot className="w-12 h-12 text-purple-600" />
            <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
          </div>
          <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
            Ollama Llava3 AI助手
          </h1>
        </div>
        <p className="text-lg text-gray-600 max-w-2xl mx-auto">
          强大的多模态AI，支持图像分析和智能对话，专为医疗场景优化
        </p>
        <div className="flex items-center justify-center space-x-2">
          <Badge variant="secondary" className="bg-purple-100 text-purple-800">
            <Zap className="w-3 h-3 mr-1" />
            本地部署
          </Badge>
          <Badge variant="secondary" className="bg-blue-100 text-blue-800">
            <Eye className="w-3 h-3 mr-1" />
            视觉分析
          </Badge>
          <Badge variant="secondary" className="bg-green-100 text-green-800">
            <Stethoscope className="w-3 h-3 mr-1" />
            医疗专业
          </Badge>
        </div>
      </div>

      {/* 功能特性网格 */}
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* 图像分析功能 */}
        <Card className="border-l-4 border-l-purple-500">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Eye className="w-5 h-5 text-purple-600" />
              <span>专业图像分析</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-sm text-gray-600">
              支持多种医疗图像类型的专业分析
            </p>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">X光片分析</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">CT扫描解读</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">MRI图像分析</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">超声图像识别</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 多模态对话 */}
        <Card className="border-l-4 border-l-blue-500">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <MessageSquare className="w-5 h-5 text-blue-600" />
              <span>多模态对话</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-sm text-gray-600">
              同时理解文字和图片的智能对话
            </p>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">文本+图像输入</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">上下文记忆</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">专业医疗回答</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">实时响应</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 用户体验 */}
        <Card className="border-l-4 border-l-green-500">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <ImageIcon className="w-5 h-5 text-green-600" />
              <span>易用界面</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <p className="text-sm text-gray-600">
              直观友好的用户操作体验
            </p>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">拖拽上传图片</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">实时预览</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">参数调节</span>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-4 h-4 text-green-500" />
                <span className="text-sm">响应式设计</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 使用指南 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Bot className="w-5 h-5 text-purple-600" />
            <span>快速开始</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <h3 className="font-semibold text-lg">🖼️ 图像分析模式</h3>
              <div className="space-y-2 text-sm text-gray-600">
                <p><strong>步骤 1:</strong> 点击右下角的"Llava3 AI"按钮</p>
                <p><strong>步骤 2:</strong> 选择"分析"标签页</p>
                <p><strong>步骤 3:</strong> 选择分析类型（X光、CT、MRI等）</p>
                <p><strong>步骤 4:</strong> 拖拽或点击上传医疗图像</p>
                <p><strong>步骤 5:</strong> 可选择性输入分析要求</p>
                <p><strong>步骤 6:</strong> 点击发送开始分析</p>
              </div>
            </div>
            
            <div className="space-y-4">
              <h3 className="font-semibold text-lg">💬 多模态对话</h3>
              <div className="space-y-2 text-sm text-gray-600">
                <p><strong>步骤 1:</strong> 打开AI助手并选择"对话"标签页</p>
                <p><strong>步骤 2:</strong> 输入文字消息或上传图片</p>
                <p><strong>步骤 3:</strong> 可以同时发送文字+图片</p>
                <p><strong>步骤 4:</strong> AI会理解并回复</p>
                <p><strong>步骤 5:</strong> 继续对话，AI保持上下文记忆</p>
                <p><strong>步骤 6:</strong> 随时上传新图片继续讨论</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 系统要求和配置 */}
      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <AlertCircle className="w-5 h-5 text-orange-600" />
              <span>系统要求</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="space-y-2 text-sm">
              <p><strong>Ollama服务:</strong> localhost:11434</p>
              <p><strong>推荐模型:</strong> llava:v1.6 或 llava3</p>
              <p><strong>最低内存:</strong> 8GB RAM</p>
              <p><strong>推荐配置:</strong> 16GB+ RAM, 8核CPU</p>
              <p><strong>存储空间:</strong> 4-20GB（模型文件）</p>
            </div>
            <div className="pt-3 border-t">
              <p className="text-xs text-gray-500">
                💡 首次使用需要下载模型文件，请确保网络连接稳定
              </p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <ExternalLink className="w-5 h-5 text-blue-600" />
              <span>相关链接</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="space-y-2">
              <Button 
                variant="outline" 
                size="sm" 
                className="w-full justify-start"
                onClick={() => window.open('https://ollama.ai', '_blank')}
              >
                <ExternalLink className="w-4 h-4 mr-2" />
                Ollama官网
              </Button>
              <Button 
                variant="outline" 
                size="sm" 
                className="w-full justify-start"
                onClick={() => window.open('/OLLAMA_LLAVA3_INTEGRATION_GUIDE.md', '_blank')}
              >
                <ExternalLink className="w-4 h-4 mr-2" />
                集成指南
              </Button>
              <Button 
                variant="outline" 
                size="sm" 
                className="w-full justify-start"
                onClick={() => {
                  // 执行测试脚本（如果在开发环境）
                  console.log('运行测试: node test-ollama-llava.js')
                }}
              >
                <ExternalLink className="w-4 h-4 mr-2" />
                运行测试
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 重要声明 */}
      <Card className="border-orange-200 bg-orange-50">
        <CardHeader>
          <CardTitle className="flex items-center space-x-2 text-orange-800">
            <AlertCircle className="w-5 h-5" />
            <span>重要声明</span>
          </CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-orange-700">
          <div className="space-y-2">
            <p><strong>⚠️ 医疗免责声明:</strong></p>
            <ul className="list-disc pl-5 space-y-1">
              <li>本AI分析结果仅供参考，不能替代专业医疗诊断</li>
              <li>所有医疗决策应由合格的医疗专业人员做出</li>
              <li>紧急情况请立即联系医疗机构，不要依赖AI分析</li>
              <li>系统可能存在误判，请结合专业医疗知识使用</li>
            </ul>
            <p className="pt-2"><strong>🔒 隐私保护:</strong> 所有图像处理都在您的本地设备上进行，无数据上传到外部服务器。</p>
          </div>
        </CardContent>
      </Card>

      {/* Ollama Llava助手组件 */}
      <OllamaLlavaAssistant 
        userId="demo-user"
        initialMode="analysis"
        onAnalysisComplete={(result) => {
          console.log('演示页面 - 分析完成:', result)
        }}
      />
    </div>
  )
}